<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEPU-ical日历课程</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    <link rel="icon" href="../index/imc.png">
    <script type="text/javascript" src="../js/config.js"></script>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            display: -webkit-flex;
            background-image: url("pc.jpg");
            background-size: 100% 100%;
            align-items: center;
            justify-content: center;
        }

        #main {
            padding: 96px 32px;
            width: 25vw;
            margin: auto;
            /* border-radius: 1rem; */
            background: white;
            box-shadow: 2px 5px 30px #007bff;
            border-radius: 1rem 5rem;
            text-align: center;
        }

        #select-file {
            background: white;
            padding: 10px 30px;
            width: 100%;
            border: 1px solid #007bff;
            letter-spacing: 1px;
            border-radius: .25rem;
            transition: all .5s;
        }

        #select-file:hover {
            background: #007bff;
            color: white;
        }

        #file {
            display: none;
        }

        #email {
            margin-bottom: 24px;
        }

        #submit {
            width: 100%;
            height: 3rem;
            /*  margin-top: 2rem; */
            border-radius: 0 30%;
        }

        #file-name {
            color: #888;
            margin: 12px;
            text-align: center;
        }

        .title {
            color: #555;
            font-size: 2rem;
            margin-top: -48px;
            padding-bottom: 24px;
        }

        @media screen and (min-width: 969px) {
            #main {
                width: 25vw;
            }
        }

        @media screen and (max-width: 968px) and (min-width: 768px) {
            #main {
                width: 50vw;
            }
        }

        @media screen and (max-width: 768px) {
            #main {
                width: 80vw;
                /* border-radius: 0; */
                margin: 0 24px;
                padding: 64px 32px;
            }
        }
    </style>
</head>

<body>
<script src=".././js/jquery.js"></script>
<script src=".././js/bootstrap.min.js"></script>
<div id="main" class="align-middle">
    <div class="title">ICAL日历课程</div>
    <input type="text" class="form-control" placeholder="请输入邮箱" id="email">
    <input type="file" id="file">
    <button id="select-file">选择课程EXCEL文件</button>
    <div id="file-name"></div>
    <button class="btn btn-primary" id="submit">提交课表</button>
</div>
<script>
    window.files = []
    $("#select-file").bind('click', function () {
        document.getElementById("file").click()
    })
    // 文件上传
    $("#submit").bind("click", function () {
        // 验证
        var email = $("#email").val()
        var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (!emailReg.test(email)) {
            alert("请检查邮箱")
            return
        }
        if (window.files.length == 0) {
            alert("请选择要上传的文件")
            return
        }
        console.log(email)
        suffix = window.files[0].name.split(".")[1]
        if (suffix != "xls" && suffix != "xlsx") {
            alert("只能上传xlsx或xls格式文件！")
            window.files = []
            return
        }

        // 上传post
        var form = new FormData();
        form.append("email", email);
        form.append("start", "2021-09-06");
        form.append("end", "2021-12-26");
        form.append("file", window.files[0]);

        var settings = {
            "url": config.urlConfig.url + "/cslg/nepu/ical",
            "method": "POST",
            "timeout": 0,
            "processData": false,
            "mimeType": "multipart/form-data",
            "contentType": false,
            "data": form,
            'success': function (result) {
                if (!!JSON.parse(result)) {
                    alert(JSON.parse(result).resultMsg)
                }
                return
                alert("上传失败!")
            },
            'error': function (err) {
                alert("请求出错，请联系管理员 " + err)
            }
        };
        $.ajax(settings)
        // .done(function (response) {
        //     console.log(response);
        // });
    })
    // 文件选择
    $('#file').change(function (e) {
        console.log(e.currentTarget.files)
        window.files = e.currentTarget.files
        $("#file-name").text(window.files[0].name)
    })

</script>
</body>

</html>